<template>
  <div class="page_pagination">
    <!-- <span>每页</span> -->
    <el-pagination
      :current-page="pagination.page"
      :page-size="pagination.pageSize"
      :page-sizes="pagination.pageSizes"
      :layout="pagination.layout"
      :total="pagination.total"
      :background="pagination.background"
      @current-change="pagination.onChange"
      @size-change="pagination.onPageSizeChange"
    >
      <div class="tone">条/页</div>
    </el-pagination>
  </div>
</template>

<script lang="ts" setup>
interface Props {
  pagination: {
    page?: number
    pageSize?: number
    pageSizes?: number[]
    background?: boolean
    layout?: string
    total: number
    onChange?: (size: number) => void
    onPageSizeChange?: (size: number) => void
  }
}

withDefaults(defineProps<Props>(), {
  pagination: () => ({
    background: true,
    // 当前页
    page: 1,
    // 每页多少条数据
    pageSize: 10,
    // 总数据
    total: 0,
    // 可切换页码数
    pageSizes: [10, 20, 30, 40, 50, 100],
    // 分页器布局
    layout: '->, sizes, slot, prev, pager, next, jumper',
  }),
})
</script>

<style lang="scss" scoped>
.page_pagination {
  display: flex;
  align-items: center;
  width: 100%;
  margin-top: 26px;
  // margin-bottom: 18px;
  justify-content: center;
  font-size: 14px;
  .tone {
    margin-left: 16px;
  }

  :deep(.el-pagination) {
    .el-select .el-input {
      width: 70px;
    }
  }
}
</style>
